{% extends 'base.html' %}
{% load staticfiles %}
{% load monitor_tags %}

{% block title %}
    批量命令
{% endblock %}

{% block style %}
    <style>
        #wrap{margin-top: 30px;}

        .operation span{cursor: pointer; margin-right: 10px; box-shadow: 2px 2px 6px rgba(0, 0, 0, .5); user-select: none;}
        .operation span:active{box-shadow: none;}
        .operation span i{font-size: 10px; line-height: 18px;}

        .search{margin-top: 10px; border-bottom: 1px solid #f6f6f6;}
        .search input.search-input{padding: 5px 10px; min-width: 50%; outline: none; border: none; font-size: 16px;
            border-bottom: 2px solid transparent; transition: border-bottom .5s;}
        .search input.search-input:focus{border-bottom: 2px solid rgba(169, 216, 110, 0.75);}
        .search .search-icon{font-weight: bolder; font-size: 20px; line-height: 34px; cursor: pointer;}
        .search .search-icon:hover{color: #000;}
        .area{margin-top: 15px;}

        .host-list li{padding: 5px;}

        .clear-float::after{content: ''; display: block; clear: both;}
        .controller-btn{margin-top: 20px;}
        .controller-btn div.con{float: left; margin-right: 10px;}
        .controller-btn div.con div{float: left;}
        .controller-btn div.execute-cmd .right{width: 40px; height: 30px; line-height: 30px; text-align: center; color: #fff;}
        .controller-btn .execute-cmd .execute{background-color: #9ac360;}
        .controller-btn .execute-cmd .stop{background-color: #ee511f;}
        .controller-btn div.execute-cmd button{padding: 5px 15px; height: 30px; line-height: 20px; border: none; color: #fff;}
        .controller-btn div.execute-cmd button.execute-btn{background-color: #a8d363; border-radius: 0 !important;}
        .controller-btn div.execute-cmd button.stop-btn{background-color: #FF5722;}
        .controller-btn div.execute-cmd button.execute-btn:hover{background-color: rgba(168, 211, 99, 0.85);}
        .controller-btn div.execute-cmd button.stop-btn:hover{background-color: rgba(255, 87, 34, 0.84);}

        .line{margin: 15px 0; height: 1px; width: 100%; background-color: #ececec;}

        .layui-panel{padding-bottom: 20px;}

        .table-title{float: left;}
        .table-toggle{float: right; cursor: pointer;}
        .table-toggle:hover{color: #FFB800;}
        table tbody tr td a:hover{color: #01AAED;}

        .information-area{margin-top: 15px;}
        .item{padding: 5px; border-bottom: 1px dotted #dedede;}
        .item .head i{font-size: 16px; vertical-align: bottom; cursor: pointer;}
        .item .show{margin-top: 10px;}
    </style>
{% endblock %}

{% block right_container %}
    <blockquote class="layui-elem-quote" style="margin-top: 10px;"><h3>{% block nav %}批量命令{% endblock %}</h3></blockquote>
    <div id="wrap">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="layui-card layui-panel">
                <div class="layui-card-header">
                    选择待操作的主机
                    <span class="badge bg-info" v-text="'已选： ' + selectedHost"></span>
                </div>
                <div class="layui-card-body">
                    <div class="operation">
                        <span class="label label-default toggle-down" @click="toggleDown">
                            <i class="layui-icon layui-icon-down"></i>
                            展开
                        </span>
                        <span class="label label-primary toggle-up" @click="toggleUp">
                            <i class="layui-icon layui-icon-up"></i>
                            收缩
                        </span>
                        <span class="label label-success" @click="selected">
                            <i class="layui-icon layui-icon-ok"></i>
                            已选
                        </span>
                        <span class="label label-info">
                            <i class="layui-icon layui-icon-circle"></i>
                            未选
                        </span>
                        <span class="label label-warning" @click="selectAll">
                            <i class="layui-icon layui-icon-radio"></i>
                            全选
                        </span>
                        <span class="label label-danger" @click="cancleAll">
                            <i class="layui-icon layui-icon-release"></i>
                            取消全选
                        </span>
                    </div>
                    <div class="search">
                        <input class="search-input" type="text" placeholder="搜索主机...">
                        <i class="layui-icon layui-icon-search search-icon"></i>
                    </div>
                    <div id="host_hook" class="area" ref="area">
                        <div class="layui-collapse layui-form">
                            {% for host_group in host_groups %}
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">
                                        {{ host_group.name }}
                                        <span class="badge bg-success">主机数： {{ host_group.host_to_remote_users.count }}</span>
                                    </h2>
                                    <div :class="'layui-colla-content' + (showAll ? ' layui-show' : '')">
                                        <ul class="host-list">
                                            {% for host in host_group.host_to_remote_users.all %}
                                                <li @click="addHost">
                                                    <input type="checkbox"
                                                           class="host-to-remote-user"
                                                           value="{{ host.id }}"
                                                           title="{{ host.host.name }}({{ host.host.ip_addr }})@{{ host.remote_user.username }}"
                                                           lay-skin="primary">
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            {% endfor %}
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">
                                    未分组主机
                                    <span class="badge bg-success">主机数： {{ none_group.count }}</span>
                                </h2>
                                <div :class="'layui-colla-content' + (showAll ? ' layui-show' : '')">
                                    <ul class="host-list">
                                        {% for host in none_group %}
                                            <li @click="addHost">
                                                <input type="checkbox"
                                                       class="host-to-remote-user"
                                                       value="{{ host.id }}"
                                                       title="{{ host.host.name }}({{ host.host.ip_addr }})@{{ host.remote_user.username }}"
                                                       lay-skin="primary">
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            <div class="layui-col-md12">
                <div class="layui-card layui-panel">
                    <div class="layui-card-header">{% block cmd_head %}批量命令执行{% endblock %}</div>
                    <div class="layui-card-body">
                        {% block cmd_option_area %}
                            <div class="bat-cmd">
                                <textarea placeholder="输入要执行的命令..." class="layui-textarea cmd" style="height: 70px;"></textarea>
                            </div>
                        {% endblock %}
                        <div class="controller-btn clear-float">
                            <div class="time-out con">
                                <button class="layui-btn layui-btn-sm layui-btn-normal">
                                    任务超时时间(30分钟)
                                    <i class="layui-icon layui-icon-down"></i>
                                </button>
                            </div>
                            <div class="execute-cmd con clear-float">
                                <div class="right execute"><i class="layui-icon layui-icon-senior"></i></div>
                                <button class="execute-btn layui-btn" data-method="notice"
                                        data-batch="{% block btn-type %}cmd{% endblock %}">执行命令</button>
                            </div>
                            <div class="execute-cmd con clear-float">
                                <div class="right stop"><i class="layui-icon layui-icon-pause"></i></div>
                                <button class="stop-btn">停止</button>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="information">
                            <div class="top-span">
                                <span class="badge bg-primary target-id">任务ID：N/A</span>
                                <span class="badge bg-success target">总任务N/A</span>
                                <span class="badge bg-info finished">已完成N/A</span>
                                <span class="badge bg-warning defeat">失败N/A</span>
                                <span class="badge bg-important rest">剩余N/A</span>
                                <span @click="toggle('info')" class="badge information-span" style="cursor: pointer; user-select: none;">
                                    <i class="fa fa-toggle-down"></i> 收缩/展开
                                </span>
                            </div>
                        </div>
                        <div id="info_hook" class="information-area">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12" style="margin-top: 20px;">
                <div class="layui-card layui-panel">
                    <div class="layui-card-header clear-float">
                        <div class="table-title">最近批量操作</div>
                        <div class="table-toggle" @click="toggle('table')"><i class="layui-icon layui-icon-down"></i></div>
                    </div>
                    <div id="table_hook" class="layui-card-body">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>任务ID</th>
                                <th>任务类型</th>
                                <th>任务内容</th>
                                <th>主机个数</th>
                                <th>成功</th>
                                <th>失败</th>
                                <th>未知</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for item in batch_command %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>
                                        <a href="javascript:void(0);" @click="getCmdInfo({{ item.id }})">{{ item.id }}</a>
                                    </td>
                                    <td>{{ item.get_task_type_display }}</td>
                                    <td>{{ item.content }}</td>
                                    <td>{{ item.tasklogdetail_set.count }}</td>
                                    {% count_host_num item as host_list %}
                                    <td>{{ host_list.1 }}</td>
                                    <td style="color: #f00;">{{ host_list.2 }}</td>
                                    <td>{{ host_list.0 }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {% block scopejs %}
        <script>
            /**
             * cmd专属
             */
            (() => {
                $(".host-manage").addClass("active");
                $(".batch_cmd").addClass("active");
            })();
        </script>
    {% endblock %}
    <script>
        function iToggle(self) {
            $(self).parent().next().children().toggle();
        }
    </script>
    <script>
        layui.use('element', function(){
            let element = layui.element;
        });

        layui.use('form', function(){
            let form = layui.form;
        });
    </script>
    <script src="{% static 'js/batch_js.js' %}"></script>
    <script src="{% static 'plugins/vue/vue2.5.22.js' %}"></script>
    <script src="{% static 'plugins/vue/axios0.18.0.js' %}"></script>
    <script>
        new Vue({
            el: "#wrap",
            data: {
                showAll: false,
                selectedHost: 0,
            },
            methods: {
                getCmdInfo(id) {
                    let index = layer.open({
                        type: 2,
                        content: `<div>
                                    <i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 20px; color: #1E9FFF;"></i>
                                 </div>`,
                        title: "请求数据",
                        skin: "layui-layer-molv",
                        isOutAnim: false,
                    });
                    // 请求后端的数据
                    axios.get(`/monitor/batch_cmd_display/${id}`).then(response => {
                        let data = response.data;
                        layer.close(index);
                        // 填充字符串
                        let colorSelector = ['#01AAED', '#5FB878', '#FF5722', '#FF5722'];
                        let content = `<div class="item">
                                       <h2 style="margin-bottom: 20px; color: #01AAED;" class="layui-timeline-title">
                                           <span style="font-weight: 700; color: #393D49;">User:</span> ${data['user']}
                                           <span style="font-weight: 700; color: #393D49;">Email:</span> ${data['email']}
                                       </h2>
                                       <ul class="layui-timeline">`;
                        for (let item of data['cmd_list']) {
                            content += `
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text" style="color: ${colorSelector[item.status]};">
                                        <h3 style="color: ${colorSelector[item.status]};" class="layui-timeline-title">${item.host}(${item.ip_addr})</h3>
                                        <p>
                                            ${item.result}
                                        </p>
                                    </div>
                                </li>
                            `;
                        }
                        content += `</ul></div>`;
                        layer.open({
                            type: 0,
                            area: '50%',
                            closeBtn: 2,
                            shadeClose: true,
                            btn: ["关闭"],
                            title: `命令类型 - ${data['task_type']} - ${data['content']}`,
                            content: content,
                            skin: "layui-layer-molv",
                        });
                    });
                },
                toggleDown() {
                    this.$refs.area.style.display = 'block';
                },
                toggleUp() {
                    this.$refs.area.style.display = 'none';
                },
                toggle(type) {
                    if (type === "table") {
                        $("#table_hook").toggle();
                    } else if (type === 'info') {
                        $("#info_hook").toggle();
                    }
                },
                selectAll() {
                    // 全选
                    // 首先打开所有的折叠页
                    this.showAll = true;
                    // 选中所有的
                    $(".layui-form-checkbox").addClass("layui-form-checked");
                    let checkboxDom = $("input[type=checkbox]");
                    checkboxDom.attr("checked", "checked");
                    this.selectedHost = checkboxDom.length;
                },
                cancleAll() {
                    this.showAll = false;
                    $(".layui-form-checkbox").removeClass("layui-form-checked");
                    $("input[type=checkbox]").attr("checked", false);
                    this.selectedHost = 0;
                },
                selected() {
                    // 获取所有已经选中的主机
                },
                addHost(e) {
                    let eleDom = e.target || e.srcElement;
                    let eleName = eleDom.localName;
                    if (eleName === "div" || eleName === "i" || eleName === "span") {
                        if ($(e.currentTarget).children("input").prop("checked")) {
                            // 没有选中
                            this.selectedHost++;
                        } else {
                            this.selectedHost--;
                        }
                    }
                },
            },
        });
    </script>
{% endblock %}

